<!--  -->
<template>
  <div class="count-container">
    <div class="my-chart" ref="chart_ref"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    allData: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      myChart: null,
      startValue: 0, // 缩放起点
      endValue: 1, // 缩放终点
      timer: null,
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destryed() {
    window.removeEventListener('resize', this.screenAdapter)
    clearInterval(this.timer)
  },
  computed: {
    ...mapState(['theme']),
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.chart_ref, this.theme)
      const initOption = {
        title: {
          text: '销售TOP10',
          top: 10,
          left: 'center',
        },
        grid: {
          top: '30%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true,
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          type: 'category',
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            type: 'bar',
          },
        ],
      }
      this.myChart.setOption(initOption)
      this.myChart.on('mouseover', () => {
        clearInterval(this.timer)
      })
      this.myChart.on('mouseout', () => {
        this.startInterval()
      })
    },
    getData() {
      if (this.allData) {
        this.allData.sort((a, b) => {
          return b.value - a.value
        })
        this.updateChart()
        this.startInterval()
      }
    },
    updateChart() {
      if (this.allData) {
        const colorArr = [
          ['#0ba82c', '#4ff778'],
          ['#2e72bf', '#23e5e5'],
          ['#5052ee', '#ab6ee5'],
        ]
        const orderState = this.allData.map((item) => {
          return item.name.split(' ')[1]
        })
        const valueData = this.allData.map((item) => {
          return item.number
        })
        const updateOption = {
          xAxis: {
            data: orderState,
          },
          dataZoom: {
            show: false,
            startValue: this.startValue,
            endValue: this.endValue,
          },
          series: [
            {
              data: valueData,
              itemStyle: {
                color: (arg) => {
                  let targetColorArr = null
                  if (arg.value > 300) {
                    targetColorArr = colorArr[0]
                  } else if (arg.value > 200) {
                    targetColorArr = colorArr[1]
                  } else {
                    targetColorArr = colorArr[2]
                  }
                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: targetColorArr[0],
                    },
                    {
                      offset: 1,
                      color: targetColorArr[1],
                    },
                  ])
                },
              },
            },
          ],
        }
        this.myChart.setOption(updateOption)
      }
    },
    screenAdapter() {
      const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              borderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0],
            },
          },
        ],
      }
      this.myChart.setOption(adapterOption)
      this.myChart.resize()
    },
    startInterval() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        this.startValue++
        this.endValue++
        if (this.endValue > this.allData.length - 1) {
          this.startValue = 0
          this.endValue = 1
        }
        this.getData()
        // this.updateChart()
      }, 2000)
    },
  },
}
</script>

<style scoped></style>
